<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
        <title>Title</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .box1{
                width: 700px;
                height: 300px;
                background: #00f;
            }
            .box2{
                width: 100px;
                height: 100px;
                background: pink;
                animation: box 4s 5s linear 4;/*数值/infinite（无限循环）   linear(匀速)*/
                animation-direction: normal;/*noraml(正向)/reverse(反向)/alternate(交替运行)*/
                animation-fill-mode: forwards;/*动画停止的关键帧(要限制次数才可以停止)；backwards(第一帧)/forwords(最后一帧)*如果设置了动画执行的方向为反向，关键帧起始和结尾也会变**/
            }
            @keyframes box {
                0%{
                    transform: translateX(0);
                }
                100%{
                    transform: translateX(600px);
                }
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <div class="box2"></div>
        </div>
    </body>
</html>